<template>
    <div id="app">
      <div class="top">

        <div class="navigation_logo">
          <RouterLink to='/'>S&Y</RouterLink>
        </div>

        <div class="navigation_user">
          <RouterLink to='/Login_Register' v-if="!userStore.isAuthenticated">登录 | 注册</RouterLink>

          <div v-else class="avatar" @click="showUserMenu">
            <span>
              {{ userStore.userData.username }}
            </span>
            <img src="public/Default_avatar.png" alt="" @dragstart.prevent>
            <el-icon><CaretBottom /></el-icon>
          </div>
        </div>

        <div class="githubSvg">
          <i title="前往Github仓库">
            <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" @click="goToGithub">
              <path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path>
            </svg>
          </i>
        </div>

        <div class="CTF" title="前往CTF靶场" @click="goToCTF">
          <el-icon><Flag /></el-icon>
          <span>CTF</span>
        </div>

        <div class="writeup" title="前往WriteUp" @click="goToWriteUp">
          <el-icon><Reading /></el-icon>
          <span>WriteUp</span>
        </div>

        <div class="tool" title="获取CTF工具">
          <i>
            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
              <path d="M876.6 239.5c-.5-.9-1.2-1.8-2-2.5-5-5-13.1-5-18.1 0L684.2 409.3l-67.9-67.9L788.7 169c.8-.8 1.4-1.6 2-2.5 3.6-6.1 1.6-13.9-4.5-17.5-98.2-58-226.8-44.7-311.3 39.7-67 67-89.2 162-66.5 247.4l-293 293c-3 3-2.8 7.9.3 11l169.7 169.7c3.1 3.1 8.1 3.3 11 .3l292.9-292.9c85.5 22.8 180.5.7 247.6-66.4 84.4-84.5 97.7-213.1 39.7-311.3zM786 499.8c-58.1 58.1-145.3 69.3-214.6 33.6l-8.8 8.8-.1-.1-274 274.1-79.2-79.2 230.1-230.1s0 .1.1.1l52.8-52.8c-35.7-69.3-24.5-156.5 33.6-214.6a184.2 184.2 0 0 1 144-53.5L537 318.9a32.05 32.05 0 0 0 0 45.3l124.5 124.5a32.05 32.05 0 0 0 45.3 0l132.8-132.8c3.7 51.8-14.4 104.8-53.6 143.9z"></path>
            </svg>
          </i>
          <span>Tool</span>
        </div>


        <div class="toggleDark" title="目前仅支持暗色模式">
            <el-switch
                class="DarkSwitch"
                size="large"
                :active-action-icon="Moon"
                :inactive-action-icon="Sunny"
                style="--el-switch-on-color: #5b5b5b; --el-switch-off-color: #60f2c8"
                v-model="isDark"
                disabled
                @change='toggleDark'/>
            <span>DarkMode</span>
        </div>


        <div class="userMenu" v-show="isMenu">
          <!-- 头像容器 -->
          <div class="avatar_container">
            <img src="public/Default_avatar.png" alt="" @dragstart.prevent>
          </div>

          <!-- 获取用户名 -->
          <div class="username_container">
            {{ userStore.userData.username }}
          </div>

          <!-- 展示基本信息 -->
          <div class="litter_menu">

          </div>

          <!-- 进入个人信息页面 -->
          <div class="user_info" @click="goToHomepage">
            <el-icon><User /></el-icon>
            <span>个人档案</span>
          </div>

          <div class="user_info" @click="goToCTF">
            <el-icon><Flag /></el-icon>
            <span>CTF习题</span>
          </div>

          <div class="user_info" @click="goToWriteUp">
            <el-icon><Reading /></el-icon>
            <span>WriteUp</span>
          </div>


          <div class="user_info" @click="goToEge">
            <el-icon><Promotion /></el-icon>
            <span>彩蛋</span>
          </div>

          <!-- 隐藏用户菜单按钮 -->
          <div class="hide_container" @click="showUserMenu">
            <el-icon><ArrowRightBold /></el-icon>
          </div>

          <div class="uid">
            <p>UID：{{ userStore?.UID }}</p>
          </div>

          <!-- 退出登录 -->
          <div class="logout_container">
            <el-icon title="_退出登录_" @click="dialogVisible = true"><SwitchButton /></el-icon>
            <el-dialog
                v-model="dialogVisible"
                title="温馨提示："
                width="500"
                top="15%"
            >
              <span style="font-size: 1.5em; text-align: center">您是否退出登录？</span>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="dialogVisible = false">
                    我再想想~
                  </el-button>
                  <el-button type="primary" @click="handleLogout">
                    我意已决！
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>

      </div>

      <!-- 返回顶部 -->
      <el-backtop :bottom="100">
        <div
            style="
           height: 100%;
           width: 100%;
           background-color: rgb(54,199,210);
           border-radius: 50%;
           text-align: center;
           line-height: 40px;
           color: rgb(38,38,38);
         ">
          ▲
        </div>
      </el-backtop>

      <!--  路由视图  -->
      <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view />
        </keep-alive>
      </transition>
    </div>
</template>

<script lang="ts" setup>
import '@/style/userMenu.css'
import { useUserStore , } from "@/stores/userStore";
import {
  ArrowRightBold,
  CaretBottom, Flag, Moon,
  Promotion,
  Reading,
  Sunny,
  SwitchButton,
  User
} from "@element-plus/icons-vue";
import {showUserMenu, isMenu} from "@/static/UserMenu/UserMenu";
import {dialogVisible, userLogout} from "@/static/Logout/Logout";
import { useRouter } from 'vue-router';
import {useDark} from "@vueuse/core";

const isDark = useDark({
  storage: localStorage,
  defaultValue: true // 设置默认值为 true
})

function toggleDark(v) {
  document.documentElement.classList.toggle('dark', isDark.value)
  isDark.value = v;
}

// 点击跳转
const router = useRouter();

function goToHomepage() {
  isMenu.value = false;
  router.push('/Homepage');
}

function goToEge() {
  isMenu.value = false;
  router.push('/Easter_egg');
}

function goToWriteUp() {
  isMenu.value = false;
  router.push('/WriteUp');
}

function goToCTF() {
  isMenu.value = false;
  router.push('/CTF');
}

function goToGithub() {
  window.open('https://github.com/JachinYang2002/Graduation-Design-Django', '_blank');
}
//
const userStore = useUserStore();
const handleLogout = userLogout();

</script>

<style scoped>
.top {
  position: fixed;
  display: flex;
  top:0;
  left: 0;
  background: #282828;
  height: 7vh;
  width: 100%;
  border-bottom: 1px solid #45f3ff;
  z-index: 99;
  box-shadow:1px 1px 2px #45f3ff;
}

.navigation_logo {
  display: flex;
  margin-left: 2%;
  height: 100%;
  width: 110px;
  justify-items: center;
  text-align: center;
}

.navigation_logo a {
  width: 100%;
  height: 100%;
  color: #7ebbff;
  font-weight: 1000;
  font-size: 36px;
  cursor: pointer;
  letter-spacing: 0.25em;
  text-decoration: none;
  font-family: 'Berlin Sans FB Demi', sans-serif;
}

.navigation_user {
  position: absolute;
  right: 20px;
  height: 100%;
  width: 220px;
}

.navigation_user a {
  position: relative;
  margin: 0 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #dddddd;
  text-decoration: none;
  font-size: 20px;
  text-align: center;
  height: 100%;
  width: 60%;
}

.navigation_user a:hover {
  border-radius: 6px 6px 0 0;
  background-color: #323232;
  color: #46ffbf;
  border-bottom: 2px solid white;
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  width: 220px;
  height: 100%;
  cursor: pointer;
}

.avatar span {
  position: relative;
  top: 5px;
  font-size: 18px;
  font-weight: 500;
  font-family: "Reggae One" ,sans-serif;
  color: #b8b8b8;
}

.avatar img {
  position: relative;
  top: 2px;
  left: 15px;
  border-radius: 50%;
  width: 45px; /* 根据需要设置宽度 */
  height: 45px; /* 宽度和高度相同，确保图片是圆形 */
  object-fit: cover; /* 确保图片内容适应圆形 */
  user-select: none; /* 设置为不可选中 */
}

.avatar i {
  position: relative;
  top: 5px;
  left: 25px;
  width: 20px;
  height: 20px;
  color: #b8b8b8;
}

.avatar svg {
  width: 20px;
  height: 20px
}

.githubSvg {
  display: flex;
  margin-left: 1%;
  height: 100%;
  width: 100px;
}

.githubSvg i {
  position: relative;
  left: 26px;
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  color: #ffffff;
}

.githubSvg svg {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.CTF {
  display: flex;
  margin-left: 1%;
  height: 100%;
  width: 100px;
  cursor: pointer;
}

.writeup {
  display: flex;
  margin-left: 1%;
  height: 100%;
  width: 120px;
  cursor: pointer;
}

.tool {
  display: flex;
  margin-left: 2%;
  height: 100%;
  width: 110px;
  cursor: pointer;
}


.toggleDark {
  display: flex;
  margin-left: 1%;
  height: 100%;
  width: 160px;
  cursor: pointer;
}

.DarkSwitch,
.tool i,
.writeup i,
.CTF i {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #ffffff;
}

.CTF svg,
.tool svg,
.writeup svg {
  height: 25px;
  width: 25px;
}

.CTF span,
.toggleDark span,
.tool span,
.writeup span {;
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

.CTF:hover,
.tool:hover,
.writeup:hover {
  margin-top:2px;
  border-bottom: 3px solid white;
}


</style>
